<template>
	<view>
		<view>
			<view class="mohuimg">
				<image src="../../static/background/sea2.jpg" mode="aspectFill"></image>
			</view>
			<view class="headbox">
				<image class="logo" :src="groupData.schoolPortraitURL" mode="aspectFit"></image>
				<view class="name">
					<text>{{groupData.school}}</text>
				</view>
				<view class="button1">
					<button class="button" v-if="flag === false" @tap="joingroup">加入</button>
					<button class="button2" v-if="flag === true" @tap="joingroup">已加入</button>
				</view>
			</view>
		</view>
		<view class="post">
			<view class="postbox" v-for="(recItem,index) in groupData.resourceList" :key="index">
				<image src="../../static/post.png" mode="aspectFill"></image>
				<view class="title">{{recItem}}</view>
			</view>
		</view>
		<view class="bigbox">
			<view class="my_evaluate" v-for="(item,index) in groupData.topicList" :key="index"
				@click.stop="dynamic(item)">
				<!--这里的list要换成获取到的数据-->
				<view class="title">
					<text>{{item.title}}</text>
					<!--帖子标题-->
				</view>
				<view class="head_box">
					<view class="head_image" @click.stop="getUser(item)">
						<!-- <image :src="item.user.avatar"></image> -->
						<image :src="item.portrait"></image>
						<!--头像-->
					</view>
					<view class="headcenter">
						<!-- <view class="head_name" @click.stop="getUser(item)">{{item.user.userName}}</view>
						<view class="head_time">{{renderTimeYMDHMS(item.postTime)}}</view> -->
						<view class="head_name" @click.stop="getUser(item)">{{item.nickname}}</view>
						<view class="head_time">{{item.createTime}}</view>
					</view>
				</view>
				<view class="content">
					<text>
						{{item.summary}}
					</text>
				</view>
				<view v-if="item.topicPictures === null">
				</view>
				<view v-if="item.topicPictures !== null">
					<view class="dynamicimage" v-if="item.topicPictures.length === 1">
						<image class="image" :src="pic" v-for="(pic, index) in item.topicPictures"
							mode="aspectFill" :key="index"></image>
					</view>
					<view class="dynamicimage2" v-if="item.topicPictures.length === 2">
						<image class="image2" :src="pic" v-for="(pic, index) in item.topicPictures"
							mode="aspectFill" :key="index"></image>
					</view>
					<view class="dynamicimage4" v-if="item.topicPictures.length === 4">
						<image class="image4" :src="pic" v-for="(pic, index) in item.topicPictures"
							mode="aspectFill" :key="index"></image>
					</view>
					<view class="dynamicimage3" v-if="item.topicPictures.length === 3 || item.topicPictures.length === 5 || item.topicPictures.length === 6 || 
				item.topicPictures.length === 7 || item.topicPictures.length === 8 || item.topicPictures.length === 9">
						<image class="image3" :src="pic" v-for="(pic, index) in item.topicPictures"
							mode="aspectFill" :key="index"></image>
					</view>
				</view>
				<view class="tagbox">
					<!-- <view class="tag" v-for="(a, index) in item.postTag" :key="index"
						:style="{'background-color':colorlists[index]}">
						#{{a}}
					</view> -->
			
					<view class="tag" v-for="(a,index) in item.tag" :key="index"
						:style="{'background-color':colorlists[index]}">
						{{a}}
					</view>
				</view>
				
				<view class="likecmt">
					<view class="likebox">
						<view @click.stop="likeNew(item)" hover-stay-time="1000">
							<image v-if="item.isLike == false"
								src="../../static/likefalseicon.png"></image>
							<image v-if="item.isLike == true"
								src="../../static/liketrueicon.png"></image>
						</view>
						<text>{{item.thumpUp}}</text><!-- {{item.postLikeNum}} -->
					</view>
					<view class="cmtbox">
						<image src="../../static/likeorcmt/resoicon.png"></image>
						<text>{{item.recommendNum}}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-fab  horizontal="right" vertical="bottom" direction="horizontal"
			 @fabClick="fabClick"></uni-fab>
	</view>
</template>

<script>
	export default{
		onLoad(option) {
			var userId = getApp().globalData.userId
			this.userId = getApp().globalData.userId
			console.log(this.userId)
			this.groupId = option.groupId
			this.getGroupData(this.userId)
		},
		onShow() {
			this.getGroupData(this.userId)
		},
		data(){
			return{
				groupId: 1,
				userId: "",
				groupData: {},
				flag:false,
				testlist1: [1, 2, 3, 4, 5, 6],
				photolist: [1, 2, 3, 4],
				isLike: 0,
				taglist: [1,2],
				colorlists: [
					'rgb(243, 2, 168)',
					'rgb(16, 195, 195)',
					'rgb(84, 2, 255)',
					'hsl(12, 90%, 34%)',
					'hsl(138, 24%, 48%)',
					'rgb(232, 13, 131)',
					'hsl(0, 99%, 34%)',
					'rgb(226, 166, 198)',
					'hsl(278, 17%, 66%)',
					'rgb(234, 199, 12)',
					'blueviolet'
				],
				likenumber:10
			}
		},
		methods:{
			getGroupData(userId) {
				uni.request({
				    url: this.baseurl + '/getGroupDetail/' + this.groupId,
					data: {
						userId: userId
					},
				    success: (res) => {
						this.groupData = res.data;
						this.flag = res.data.isAttention
						for(var i = 0; i < this.groupData.topicList.length; i++) {
							this.groupData.topicList[i].isLike = false
						}
						console.log(this.groupData)
				    }
				});
			},
			//加入小组/取消加入小组
			joingroup() {
				uni.request({
					url: this.baseurl + "/changeAttendStatus/" + this.userId + "/" + this.groupId,
					method: "POST",
					header: {
						'content-type': "application/x-www-form-urlencoded",
					},
					success: (res) => {
						this.flag == !this.flag
						if (res.data.status === "success") {
							if(this.flag == true) {
								setTimeout(()=>{
									// 服务端响应的 message 提示
									uni.showToast({
										title: "关注成功",
										icon: "none",
										position: 'bottom',
									})
									//延时关闭  加载中的 loading框
									uni.hideLoading()
								},1000)
							} else {
								setTimeout(()=>{
									// 服务端响应的 message 提示
									uni.showToast({
										title: "取消关注成功",
										icon: "none",
										position: 'bottom',
									})
									//延时关闭  加载中的 loading框
									uni.hideLoading()
								},1000)
							}
						} 
					}
				})
				if(this.flag == false){
					this.flag = true;
				}
				else{
					this.flag =false;
				}
			},
			gotoPost(){
				uni.navigateTo({
					url: '../post/postdetail'
				})
			},
			likeNew(item){
				if(item.isLike == false){
					item.isLike = true;
					item.thumpUp++;
				}
				else{
					item.isLike = false;
					item.thumpUp--;
				}
			},
			fabClick() {
				// uni.showToast({
				// 	title: '点击了悬浮按钮',
				// 	icon: 'none'
				// });
				uni.navigateTo({
					url:"../post/creatpost"
				})
			},
			dynamic(item) {
				console.log('你点击了动态')
				console.log(item)
				uni.navigateTo({
					url: '../post/postdetail' + '?topicId=' + item.topicId
				})
			},
			//修改时间格式：年月日时分秒
			renderTimeYMDHMS(date) {
				var dateee = new Date(date).toJSON();
				return new Date(+new Date(dateee) + 8 * 3600 * 1000)
					.toISOString()
					.replace(/T/g, ' ')
					.replace(/\.[\d]{3}Z/, '')
			},
		}
	}
</script>

<style lang="scss">
	.mohuimg {
		background-color: #007AFF;
		width: 100%;
		height: 400rpx;
		overflow: hidden;
	}

	.mohuimg>image {
		width: 100%;
		filter: blur(5px);
	}

	.headbox {
		display: flex;
		flex-direction: row;
		//background-color: #2C405A;
		position: relative;
		top: -270rpx;

		.logo {
			margin-left: 30rpx;
			height: 180rpx;
			width: 180rpx;
			border-radius: 100rpx;
		}

		.name {
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			color: #FFFFFF;
			font-size: 43rpx;
			margin-left: 50rpx;
		}
		
		.button1{
			display: flex;
			align-items: center;
			margin-left: 50rpx;
			
			.button{
				display: flex;
				background-color: #007AFF;
				color: #FFFFFF;
				font-weight: bold;
				border-radius: 50rpx;
				width: 180rpx;
				height: 70rpx;
				align-items: center;
				justify-content: center;
			}
			
			.button2{
				display: flex;
				background-color: #e87111;
				color: #FFFFFF;
				font-weight: bold;
				border-radius: 50rpx;
				width: 180rpx;
				height: 70rpx;
				align-items: center;
				justify-content: center;
			}
		}
	}
	
	.post{
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		//align-items: center;
		justify-content: center;
		// border-top: 20rpx;
		position: relative;
		//height: 100rpx;
		top:-200rpx;
		//border-bottom: 1upx solid #C8C7CC;
		
		.postbox{
			//background-color: #007AFF;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 10rpx;
			height: 80rpx;
			border-bottom: 1upx solid #F1F1F1;
			
			image{
				margin-left: 20rpx;
				height: 50rpx;
				width: 50rpx;
			}
			
			.title{
				margin-left: 30rpx;
			}
		}
	}
	
	.bigbox{
		display: flex;
		flex-direction: column;
		position: relative;
		top:-180rpx;
		//background-color: #2C405A;
		
		.my_evaluate {
			display: flex;
			flex-direction: column;
			padding: 20rpx;
			margin: 20rpx;
			border-radius: 8rpx;
			box-shadow: 0 0 10rpx 2rpx rgba($color: #000000, $alpha: 0.1);
			box-sizing: border-box;
			background: #FFFFFF;
		
			.title {
				width: 100%;
				//background-color: #2C405A;
		
				text {
					font-weight: bold;
					font-size: 35rpx;
				}
			}
		
			.head_box {
				display: flex;
				flex-direction: row;
				float: left;
				width: 100%;
				height: 140rpx;
				justify-content: space-between;
				align-items: center;
				position: relative;
				justify-content: flex-start;
		
				.head_image {
					//background-color: #2C405A;
					width: 100rpx;
					height: 100rpx;
					//overflow: hidden;
					margin-left: 10rpx;
		
					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
		
				.headcenter {
					display: flex;
					//background-color: #4CD964;
					height: 120rpx;
					flex-direction: column;
					width: 400rpx;
					margin-left: 10rpx;
		
					.head_name {
						//background-color: #FFFFFF;
		
						margin-top: 15rpx;
						font-size: 35rpx;
						color: #555555;
						//position: absolute; 
						//left: 80rpx;
						font-weight: bold;
					}
		
					.head_time {
						//background-color: #FFFFFF;
		
						margin-top: 15rpx;
						font-size: 30rpx;
						color: #999999;
					}
				}
			}
		
			.content {
				//background-color: #FFFFFF;
				//background-color: #007111;
				//display: flex;
				width: 630rpx;
				font-size: 25rpx;
				justify-content: center;
				//align-items: center;
				color: #555555;
				margin-left: 20rpx;
				overflow: hidden;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical;
				/** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 5;
				//align-items: center;
			}
		
			.dynamicimage {
				display: flex;
				//background-color: #000000;
				flex-direction: row;
				//align-items: center;
				justify-content: center;
				margin-top: 20rpx;
		
				.image {
		
					align-items: center;
					height: 400rpx;
					width: 400rpx;
					border-radius: 10rpx;
				}
			}
		
			.dynamicimage2 {
				display: flex;
				//background-color: #000000;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
		
				.image2 {
					//background-color: #007AFF;
					align-items: center;
					height: 300rpx;
					width: 300rpx;
					border-radius: 10rpx;
					margin-left: 10rpx;
				}
			}
		
			.dynamicimage3 {
				display: flex;
				//background-color: #000000;
				flex-wrap: wrap;
				flex-direction: row;
				align-items: center;
				//justify-content: center;
				align-items: flex-start;
				align-content: flex-start;
				margin-top: 20rpx;
				margin-left: 15rpx;
		
				.image3 {
					//background-color: #007AFF;
					align-items: center;
					height: 200rpx;
					width: 200rpx;
					border-radius: 10rpx;
					margin-left: 10rpx;
					margin-top: 10rpx;
				}
			}
		
		
			.dynamicimage4 {
				display: flex;
				//background-color: #000000;
				flex-wrap: wrap;
				flex-direction: row;
				align-items: flex-start;
				align-content: flex-start;
				justify-content: center;
				margin-top: 10rpx;
		
				.image4 {
					//background-color: #007AFF;
					margin-top: 10rpx;
					align-items: center;
					height: 300rpx;
					width: 300rpx;
					border-radius: 10rpx;
					margin-left: 10rpx;
				}
			}
		
			.tagbox {
				display: flex;
				flex-direction: row;
				height: 50rpx;
				width: 100%;
				//background-color: #007AFF;
				margin-top: 15rpx;
				justify-content: flex-start;
				align-items: center;
		
				.tag {
					display: flex;
					font-size: 20rpx;
					margin-left: 20rpx;
					padding-top: 5rpx;
					padding-bottom: 10rpx;
					padding-left: 10rpx;
					padding-right: 10rpx;
					color: #FFFFFF;
					height: 30rpx;
					border-radius:20rpx;
					//align-items: center;
					//width: 100rpx;
					text-align: center;
					text-justify: center;
				}
			}
			
			.likecmt {
				margin-top: 30rpx;
				//background-color: #007AFF;
				height: 60rpx;
				width: 100%;
				display: flex;
				//flex: 1;
				//width: 200rpx;
				//margin-left: 200rpx;
				justify-content: flex-end;
			
				.likebox {
					display: flex;
					flex-direction: row;
					//background-color: #333333;
					height: 100%;
					width: 120rpx;
			
					image {
						height: 50rpx;
						width: 50rpx;
					}
			
					text {
						margin-top: 5rpx;
					}
				}
			
				.cmtbox {
					display: flex;
					flex-direction: row;
					//background-color: #4CD964;
					height: 100%;
					width: 120rpx;
				}
			
				image {
					height: 50rpx;
					width: 50rpx;
				}
			
				text {
					margin-top: 5rpx;
				}
			}
		}
	}
</style>
